<template>
       <div>

     <el-table :data="tableData" style="width: 100%" height="100%" @cell-click="onclick"  :header-cell-class-name="mensass"  :span-method="objectSpanMethod" :row-class-name="tableRowClassName" cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column :prop="item.prop" :label="item.label"  v-for="(item,index) in propData" :key="index">
        <el-table-column :prop="item1.prop"  v-if="item.arrs.length>0" v-for="(item1,index1) in item.arrs" :key="index1" />
    </el-table-column>
            </el-table>
        </div>
</template>

<script>
export default {
  props:{
    tableData:{
      type:Array,
      default: ()=>{}
    }
  },
         data(){
             return{
                 propData:[],
                 headerStyle:{
                     'background':'#FDF6EE'
                 },
                 tableData:[
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },

                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                                          {

    date: '张三',
    name: '活动次数（场）',
    state: '45',
    city: '45',
                     },
                  ]
             }
         },
         created(){
      this.propData = [
        {
          prop:'date',
          label:'区域名称',
          arrs:[
             {
              prop:'date'
            },
            {
              prop:'name',
            },
          ],
        },
        {
          prop:'state',
          label:'山东',
          arrs:[]
        },
                {
          prop:'city',
          label:'安徽',
          arrs:[]
        },
      ]
         },
         methods:{
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 4 === 0) {
            return {
              rowspan: 4,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      tableRowClassName({row, rowIndex}){
        //   console.log(row)
        if(row.name == "活动次数（场）"){
            console.log(555555)
            return 'success-row'
        }
        // if(){

        // }
      },
      mensass({row, rowIndex }){
        //    console.log(row,rowIndex)
           if(rowIndex > 0  ){
              return 'conceal'
           }else{
               return 'header-row'
           }
      },
      onclick(row, column, cell, event){
             console.log(row, column, cell, event)
      }
         }
}
</script>

<style scoped>
/deep/.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#FDF6EE !important;
  height: 3rem;
}
/deep/.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 1.25rem;
font-weight: 400;
color: var(--el-color-text-3);
}
/deep/.cell-row{
    height: 3rem;
}
/deep/.cell-row .cell{

      text-align: center;
    font-size: 1.25rem;
font-weight: 400;
color: var(--el-color-text-3);
/* line-height: 22rem; */
}
 /deep/ .el-table .success-row{
    /* color:var(--el-color-primary); */
}
/deep/ .conceal {
    display: none;
}
 /deep/ .el-table .success-row .el-table_1_column_1_column_3 .cell{
    color:var(--el-color-primary) !important;
}



</style>